<template>
	<div class="goods-detail bg-white" v-if="data">
		<section class="layout-around pl60rem pr60rem goods-detail-title border-b">
			<span class="fs32rem c666" :class="view == 0 ? 'select-color':''" @click="showView(0)">商品详情</span>	
			<span class="fs32rem c666" :class="view == 1 ? 'select-color':''" @click="showView(1)" v-if="data.spec_list">产品参数</span>	
			<span class="fs32rem c666" :class="view == 2 ? 'select-color':''" @click="showView(2)">{{data.rules.title}}</span>	
		</section>
		<transition name="slide-fade">
			<section v-html="data.description" v-show=" view == 0 " class="pb100rem mt30rem mb30rem pr30rem pl30rem bg-white">
				
			</section>
		</transition>
		<transition name="slide-fade">
			<section v-show=" view == 1 " class="parameter pb100rem mt30rem mb30rem pr30rem pl30rem bg-white" v-if='data.spec_list'>
				<ul class="parameter-title mt30rem layout-around">
					<li class="align-center bold c333 fs32rem"  v-for="item in data.spec_list">
						{{ item.spec_name }}
						<ul>
							<li class="align-center c38 fs26rem" v-for="items in item.value">{{ items.spec_value_name }}</li>
						</ul>
					</li>
				</ul>
			</section>
		</transition>
		<transition name="slide-fade">
			<section v-html="data.rules.content" v-show=" view == 2 " class="bg-white pb100rem mt30rem mb30rem pr30rem pl30rem  bg-white">
			</section>
		</transition>
	</div>
</template>

<script>
	
	export default{
		name: 'Goods-detail',
		data()
		{
			return{
				view      : 0,
				rulesText : ''
			}
		},
		props: ['data'],
		methods:
		{
			showView(Num)
			{
				this.view = Num;
			}
		}
	}
</script>

<style lang="less">
	.goods-detail{
		.goods-detail-title{
			height: 90/28rem;
			line-height: 90/28rem;
		}
		.select-color{
			font-weight: 600;
			color: #333;
			position: relative;
		}
		img{
			width: 100%;
			display: block;
		}
		.select-color:after{
			content: "";
			display: block;
			background-color: #ff0036;
			height: 6/28rem;
			width: 100%;
			position: absolute;
			bottom: -0;
			left: 0;
		}
	}
	.slide-fade-enter-active {
		transition: all .6s ease;
	}
	.slide-fade-leave-active {
		transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	.slide-fade-enter, .slide-fade-leave-to
		/* .slide-fade-leave-active for below version 2.1.8 */ {
		transform: translateX(10px);
		opacity: 0;
	}
</style>